<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-02-05 17:33:18
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-02-17 23:01:51
 * @FilePath: NewsPriceHome.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-02-05 17:33:18
 * @Description: 
-->
<template>
  <div>
    <el-row>
      <!-- 占位  -->
      <el-col :span="6">&nbsp;</el-col>
      <el-col :span="6">
        <span>产品：</span>
        <el-select v-model="queryParams.productId" 
        @clear="productClear"
          clearable filterable placeholder="请选择产品">
          <el-option
            v-for="item in productOptions"
            :key="item.productId"
            :label="item.productName"
            :value="item.productId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span>市场：</span>
        <el-select v-model="queryParams.marketId"
        @clear="marketClear"
          clearable filterable placeholder="请选择市场">
          <el-option
            v-for="item in marketOptions"
            :key="item.agrMarket.marketId"
            :label="item.agrMarket.marketName"
            :value="item.agrMarket.marketId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="search">&nbsp;&nbsp;查 询&nbsp;&nbsp;</el-button>
          </el-col>
          <el-col :span="12">
            <el-button @click="reset">&nbsp;&nbsp;重 置&nbsp;&nbsp;</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div class="table_list">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        max-height="300">
        <el-table-column
          prop="product.productName"
          label="品种"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="market.marketName"
          label="市场"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="price.price"
          label="价格"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="product.unitMeasure"
          label="单位"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="price.createTime"
          label="时间"
          width="auto">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { listProduct, listMarket, listNewsPricet } from '@/api/home'

export default {
  name: 'NewsPriceHome',

  data() {
    return {
      productOptions: [],
      marketOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 300,
        productId: null,
        marketId: null,
      },
      tableData: [],
      loading: true,
    };
  },

  created() {
    this.getProductList()
    this.getMarketList()
    this.search()
  },

  methods: {
    // 获取产品选项框
    getProductList() {
      listProduct({
        pageNum: 1,
        pageSize: 1000,
        level: 2
      }).then(res => {
        this.productOptions = res.rows
      })
    },
    // 获取市场选项框
    getMarketList() {
      listMarket({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.marketOptions = res.rows
      })
    },
    // 查询按钮
    search() {
      this.loading = true
      listNewsPricet(this.queryParams).then(res => {
        this.tableData = res.rows
        this.loading = false
      })
    },
    // 重置按钮
    reset() {
      this.queryParams = {}
      this.search()
    },
    marketClear() {
      this.search()
    },
    productClear() {
      this.search()
    }
  },
};
</script>

<style lang="scss" scoped>
.table_list {
  width: 85.5%;
  max-height: 280px;
  padding: 5px 100px;
  // background-color: aquamarine;
}

// 使用深度选择器（Vue 2中的/deep/、>>>或Vue 3中的::v-deep）
// 虽然可以穿透组件作用域，但不会直接污染其他页面的表格样式。
// 这是因为深度选择器只是让子组件内的样式不受当前组件作用域限制，它并不会全局影响所有同类型的元素。
::v-deep .el-table thead tr th {
  background-color: #2abc9c;
  color: #fff;
}
</style>